<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>


  <script>
		window.onload=function(ev){
			let cans=document.getElementById('cans');
			let cs=cans.getContext('2d');
			let isdraw=false;
			cans.onmousedown=function(){
				isdraw=true;
				cans.addEventListener('mousemove',move,false);
				cans.height=cans.height;//清空
			}
			
			// cans.addEventListener('mousedown mousemove',move,false);
			function move(ev){
				if(isdraw){
					let cs=cans.getContext('2d');
					let x=ev.clientX;
					let y=ev.clientY;

					cs.lineTo(x,y);
					cs.stroke();
				}
			};

			cans.addEventListener('mouseup',up,false);
			function up(ev){
				isdraw=false;
				
				// cs.clearRect(0,0,cans.width,cans.height); 
			}
		}
  </script>
</body>
</html>
